<template>
	<view class="myaudio" :style="{ width: `${width}rpx` }">
		<view class="voice_section">
			<view class="playView" @click="playClick">
				<myimg :imgsrc="paused ? '/static/images/my_voice_paly.png' : '/static/images/my_voice_pause.png'" width="60" radius="30"></myimg>
			</view>

			<view class="vtime">
				<text class="timetxt">{{ getTimeValue(audio_current) }}</text>
				/
				<text class="timetxt">{{ getTimeValue(audio_duration) }}</text>
			</view>
			<view class="vslide">
				<slider
					activeColor="#FFFFFF"
					backgroundColor="#BFC5C8"
					block-color="#FFFFFF"
					block-size="14"
					:value="audio_current"
					:max="audio_duration"
					@changing="(seek = true), (audio_current = $event.detail.value)"
					@change="audio.seek($event.detail.value)"
				/>
				<!-- @changing="changingSlider"
					@change="changCallback" -->
			</view>
			<myimg imgsrc="/static/images/my_voice.png" width="23" radius="21"></myimg>
		</view>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	props: {
		width: {
			type: [Number, String],
			default: '490',
		},
		//音频链接
		src: {
			type: [String],
			default: '',
		},
		//是否自动播放
		autoplay: {
			type: Boolean,
			default: false,
		},

		// 是否切换src音频链接
		// 是或者否分别对应两种不同的初始化音频时长方法
		changeUrl: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			audio: uni.createInnerAudioContext(),
			audio_current: 0, //当前进度(s)
			audio_duration: 0, //总时长(s)
			paused: true, //是否处于暂停状态
			loading: false, //是否处于读取状态
			seek: false, //是否处于拖动状态

			initDuration: false,
		};
	},
	created() {
		let _this = this;
		if (_this.src) {
			_this.audio.src = _this.src;
		}
		_this.audio.onCanplay(() => {
			_this.initPlayDuration();
		});

		// //音频进度更新事件
		_this.audio.onTimeUpdate(() => {
			_this.initTimeUpdate();
		});
		// //音频播放事件
		_this.audio.onPlay(() => {
			// console.log('onPlay');
			if (_this.initDuration) {
				_this.paused = false;
				_this.loading = false;
			} else {
				// console.log('2.未初始化时长');
				setTimeout(() => {
					// console.log('3.setTimeout');
					_this.initDuration = true;
					_this.audio.volume = 1;
					_this.audio.stop();
				}, 300);
			}
		});

		// //音频停止事件
		_this.audio.onStop(() => {
			// console.log('4.停止播放总时长:', _this.audio.duration);
			_this.audio_duration = _this.audio.duration;
		});

		// //音频暂停事件
		_this.audio.onPause(() => {
			_this.paused = true;
		});
		// //音频自然播放结束事件
		_this.audio.onEnded(() => {
			_this.paused = true;
			_this.audio_current = 0;
			_this.$forceUpdate();
		});
		// //音频完成更改进度事件
		_this.audio.onSeeked(() => {
			_this.seek = false;
		});
	},
	beforeDestroy() {
		this.audio.destroy();
	},
	methods: {
		initPlayDuration() {
			let _this = this;
			if (_this.changeUrl) {
				// 频繁切换URL场景
				if (_this.initDuration) return;
				// console.log('1.initPlayDuration');
				// 静音播放
				this.audio.volume = 0;
				this.audio.play();
			} else {
				_this.initDuration = true;
				// 只有一次URL
				setTimeout(function () {
					let duration = _this.audio.duration;
					// console.log(duration);
					if (duration == 0) {
						_this.initPlayDuration();
					} else {
						if (_this.audio_duration == 0) {
							// console.log(duration);
							_this.audio_duration = duration;
						}
					}
				}, 300);
			}
		},
		initTimeUpdate() {
			let _this = this;
			if (_this.seek) return;
			// console.log(_this.audio.currentTime, _this.audio.duration);

			if (!_this.audio.duration) return;
			let duration = _this.audio.duration;

			_this.audio_current = _this.audio.currentTime;
			if (duration && duration != _this.audio_duration) {
				_this.audio_duration = _this.audio.duration;
			}
		},

		//格式化时长
		getTimeValue(v) {
			let _back = function (_n) {
				return _n >= 0 && _n < 10 ? `0${_n}` : _n;
			};
			let _m, _s;
			let _time = v * 1000;
			_m = _back(Math.floor(_time / 1000 / 60));
			_s = _back(Math.floor((_time / 1000) % 60));
			return `${_m}:${_s}`;
		},
		//点击播放按钮
		playClick() {
			let _this = this;
			if (!_this.initDuration) return;
			// console.log(_this.paused);
			if (_this.paused) {
				this.audio.play();
				// this.loading = true;
			} else {
				this.audio.pause();
			}
		},

		// changingSlider(event) {
		// 	let _this = this;
		// 	let v = event.detail.value;
		// 	_this.seek = true;
		// 	if (!_this.paused) {
		// 		this.audio.pause();
		// 	}
		// 	_this.audio_current = Math.floor(_this.audio_duration * (v / 100));
		// },

		// changCallback(event) {
		// 	let _this = this;
		// 	console.log(event);
		// },
	},

	watch: {
		src(src, old) {
			this.audio_current = 0;
			this.audio_duration = 0;
			this.initDuration = false;
			this.audio.src = src;
			this.$forceUpdate();
			// if (old || this.autoplay) {
			// 	this.play();
			// }
		},
	},
};
</script>

<style lang="scss">
.voice_section {
	display: flex;
	align-items: center;
	height: 85rpx;
	background: #e8e8e8;
	border-radius: 43rpx;
	padding: 12rpx;
	.vtime {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 38rpx;
		margin: 0 26rpx 0 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.timetxt {
			width: 64rpx;
			text-align: center;
		}
	}
	.vslide {
		width: 160rpx;
		margin-right: 14rpx;
	}
}
</style>
